<template>
  <div class="section page_5">
    <div class="section-base">
      <div class="flex-start font30" style="padding-top: 20px;color: #ffffff;">
        <count-to :startVal="0" :endVal="dataCount" :duration="3000"></count-to>
        {{dataCountUnit}}
        <div></div>
      </div>
      <div class="font16" id="policeHandlingDes" style="color: #ffffff;">{{desc}}</div>
      <animation-text :text="animationText"></animation-text>
    </div>
    <div style="position: relative;" id="page_5">
      <div id="page_5_line" style="width:100%;height:200px;margin-top: 30px;"></div>
      <div id="page_5_1_line" style="width:100%;height:200px;position: absolute;left: 0;top: 2px;"></div>
    </div>
  </div>
</template>

<script>
let lineDataX = []
let lineDataY = []
export default {
  components: {},
  props: {
    reportData: {
      type: Object,
      default: function () {
        return {
          joinTime: {},
        }
      },
    },
    active: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dataCount: 0,
      dataCountUnit: '',
      continueTime: 0,
      animationText: '',
      desc: '',
    }
  },
  watch: {
    active(val) {
      if (val) {
        this.$nextTick(() => {
          this.init()
        })
      }
    },
  },
  methods: {
    init() {
      this.animationText =
        '每一次更及时的处理，都是为了早发现、早到场、早处理。新的一年，我们更早！'

      let data = this.reportData
      this.dataCount = Number(
        data.policeHandling.avgCountStr.replace(/[^0-9]/gi, '')
      )
      this.dataCountUnit = data.policeHandling.avgCountStr.replace(
        /[0-9]/gi,
        ''
      )
      lineDataX = data.policeHandling.dataList.map((item, index, arr) => {
        if (index == arr.length - 1) {
          return item.month + '月'
        } else {
          return item.month
        }
      })
      lineDataY = data.policeHandling.dataList.map((item) => {
        return (item.avgTime / 60 / 60).toFixed(2)
      })
      if (data.policeHandling.avgCount == 0) {
        this.desc = `全年警情处理速度平均为${data.policeHandling.avgCountStr}。`
      } else {
        this.desc = `全年警情处理速度平均为${data.policeHandling.avgCountStr}，比${data.policeHandling.percent}%的单位都要更快！`
      }

      this.getLine()
      this.getLineShadow()
    },
    getLine() {
      var maxIndex
      var minIndex
      var myChartLine = echarts.init(document.getElementById('page_5_line'))
      var option = {
        color: ['#ffffff'],
        title: {
          text: '平均处理时间',
          left: 'center',
          top: 0,
          textStyle: { color: '#ffffff' },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: '',
          },
          formatter: function (params) {
            return `${params[0].axisValue}月:${params[0].data}小时`
          },
        },
        legend: {
          top: 10,
        },
        grid: {
          left: 14,
          right: 14,
          bottom: '0%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: [0, 0.01],
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              //改变刻度字体样式
              color: '#fff',
              fontSize: 9,
            },
          },
          data: lineDataX,
        },
        yAxis: {
          type: 'value',
          axisTick: {
            //y轴刻度线
            show: false,
          },
          splitLine: {
            //网格线
            show: false,
          },
          axisLine: {
            //y轴
            show: false,
          },
          axisLabel: {
            formatter: function (params) {
              return ''
            },
          },
        },
        series: [
          {
            type: 'line',
            smooth: true,
            symbol: 'circle',
            lineStyle: {
              normal: {
                color: '#92B8F5', // 线条颜色
              },
            },
            symbolSize: function (value, params) {
              let arr = lineDataY
              maxIndex = arr.indexOf(Math.max(...arr).toFixed(2))
              minIndex = arr.indexOf(Math.min(...arr).toFixed(2))
              if (maxIndex == 0 && minIndex == 0) {
                return 0
              } else {
                if (
                  params.dataIndex == maxIndex ||
                  params.dataIndex == minIndex
                ) {
                  return 8
                } else {
                  return 0
                }
              }
            },
            markPoint: {
              symbolOffset: [0, -15],
              symbolSize: 0.01,
              data: [
                {
                  name: '最大值',
                  type: 'max',
                  itemStyle: {
                    normal: {
                      label: {
                        formatter: function (params) {
                          if (maxIndex == 0 && minIndex == 0) {
                            return ''
                          }
                          return '最慢' + params.value + '小时'
                        },
                        textStyle: { color: '#FFF66A' },
                      },
                    },
                  },
                },
                {
                  name: '最小值',
                  type: 'min',
                  itemStyle: {
                    normal: {
                      label: {
                        formatter: function (params) {
                          if (maxIndex == 0 && minIndex == 0) {
                            return ''
                          }
                          return '最快' + params.value + '小时'
                        },
                        textStyle: { color: '#FFF66A' },
                      },
                    },
                  },
                },
              ],
            },
            data: lineDataY,
            itemStyle: {
              normal: {
                color: '#ffffff',
                borderWidth: 8,
                borderColor: 'rgba(255,255,255,.3)',
                label: {
                  show: false, //开启显示
                  position: 'right', //在右方显示
                  textStyle: {
                    //数值样式
                    color: '#FFD25A',
                    fontSize: 12,
                  },
                },
              },
            },
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChartLine.clear()
      myChartLine.setOption(option)
    },
    getLineShadow() {
      var myChartLine1 = echarts.init(document.getElementById('page_5_1_line'))
      var option = {
        grid: {
          left: 14,
          right: 14,
          bottom: '0%',
          containLabel: true,
        },
        yAxis: {
          type: 'value',
          axisTick: {
            //y轴刻度线
            show: false,
          },
          splitLine: {
            //网格线
            show: false,
          },
          axisLine: {
            //y轴
            show: false,
          },
          axisLabel: {
            formatter: function (params) {
              return ''
            },
          },
        },
        xAxis: {
          type: 'category',
          show: false,
          data: lineDataX,
        },
        series: [
          {
            type: 'line',
            data: lineDataY,
            symbol: 'circle',
            smooth: true,
            symbolSize: 0,
            lineStyle: {
              normal: {
                color: '#d03e3c', // 线条颜色
              },
            },
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChartLine1.clear()
      myChartLine1.setOption(option)
    },
  },
  mounted() {},
}
</script>